<!DOCTYPE HTML>
<html>
<head>
    <!-- twitter bootstrap CSS stylesheet - not required by cornerstone -->
    <link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">

    <style>
        .overlay {
            /* prevent text selection on overlay */
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;

            /* ignore pointer event on overlay */
            pointer-events: none;
        }
    </style>
</head>
<body>
<div class="container">

    <h1>
        eventhandling/index.html
    </h1>

    This is an example of event handling.  Cornerstone fires the event 'CornerstoneImageRendered'
    everytime the image is updated.  The event includes the canvas context set to the image coordinate system
    so you can draw overlays.  Cornerstone also fires the event 'cornerstoneImageLoaded' on the cornerstone
    object every time an image is loaded.

    <br>

    This example illustrates this by updating the bottom left overlay with the updated WW/WC values.  It also
    illustrates overlays on the image itself by drawing a rectangle around a tumor and labeling it with the text
    "Tumor Here".  It also changes the text "Last ImageId Loaded:" to show the image id loaded

    <br>
    <br>

    <div id="imageLoaded">Last ImageId Loaded:</div>
    <div style="width:512px;height:512px;position:relative;color:white;"
         oncontextmenu="return false"
         onmousedown="return false">

        <div id="dicomImage"
             style="width:512px;height:512px;top:0px;left:0px;position:absolute">
        </div>

        <div id="topleft" class="overlay" style="position:absolute;top:0px;left:0px">
            Patient Name
        </div>
        <div id="topright" class="overlay" style="position:absolute;top:0px;right:0px">
            Render Time:
        </div>
        <div id="bottomright" class="overlay" style="position:absolute;bottom:0px;right:0px">
            Zoom:
        </div>
        <div id="bottomleft" class="overlay" style="position:absolute;bottom:0px;left:0px">
            WW/WC:
        </div>
    </div>
</div>
</body>

<!-- include the cornerstone library -->
<script src="../../dist/cornerstone.js"></script>
<script>window.cornerstone || document.write('<script src="https://unpkg.com/cornerstone-core">\x3C/script>')</script>

<!-- include special code for these examples which provides images -->
<script src="../exampleImageIdLoader.js"></script>

<script>
    // image enable the element
    const element = document.getElementById('dicomImage');
    cornerstone.enable(element);

    // setup handlers before we display the image
    function onImageRendered(e) {
        const eventData = e.detail;

        // set the canvas context to the image coordinate system
        cornerstone.setToPixelCoordinateSystem(eventData.enabledElement, eventData.canvasContext);

        // NOTE: The coordinate system of the canvas is in image pixel space.  Drawing
        // to location 0,0 will be the top left of the image and rows,columns is the bottom
        // right.
        const context = eventData.canvasContext;
        context.beginPath();
        context.strokeStyle = 'white';
        context.lineWidth = .5;
        context.rect(128, 90, 50, 60);
        context.stroke();
        context.fillStyle = "white";
        context.font = "6px Arial";
        context.fillText("Tumor Here", 128, 85);

        context.beginPath();
        context.arc(128, 128, 20, 0, 2 * Math.PI, false);
        context.fillStyle = 'green';
        context.lineWidth = -1;
        context.strokeStyle = 'white';
        context.stroke();

        document.getElementById('topright').textContent = "Render Time:" + eventData.renderTimeInMs + " ms";
        document.getElementById('bottomleft').textContent = "WW/WL:" + Math.round(eventData.viewport.voi.windowWidth) + "/" + Math.round(eventData.viewport.voi.windowCenter);
        document.getElementById('bottomright').textContent = "Zoom:" + eventData.viewport.scale.toFixed(2);

    }
    element.addEventListener('cornerstoneimagerendered', onImageRendered);

    cornerstone.events.addEventListener('cornerstoneimageloaded', function(e) {
        const eventData = e.detail;
        document.getElementById('imageLoaded').textContent = `Last ImageId Loaded: ${eventData.image.imageId}`;
    });

    // load the image and display it
    const imageId = 'example://1';
    cornerstone.loadImage(imageId).then(function (image) {
        // Now set the image which will fire the events we are interested in
        cornerstone.displayImage(element, image);

        // add event handlers to pan image on mouse move
        element.addEventListener('mousedown', function (e) {
            let lastX = e.pageX;
            let lastY = e.pageY;
            const mouseButton = e.which;

            function mouseMoveHandler(e) {
                const deltaX = e.pageX - lastX;
                const deltaY = e.pageY - lastY;
                lastX = e.pageX;
                lastY = e.pageY;

                if (mouseButton === 1) {
                    let viewport = cornerstone.getViewport(element);
                    viewport.voi.windowWidth += (deltaX / viewport.scale);
                    viewport.voi.windowCenter += (deltaY / viewport.scale);
                    cornerstone.setViewport(element, viewport);
                } else if (mouseButton === 2) {
                    let viewport = cornerstone.getViewport(element);
                    viewport.translation.x += (deltaX / viewport.scale);
                    viewport.translation.y += (deltaY / viewport.scale);
                    cornerstone.setViewport(element, viewport);
                } else if (mouseButton === 3) {
                    let viewport = cornerstone.getViewport(element);
                    viewport.scale += (deltaY / 100);
                    cornerstone.setViewport(element, viewport);
                }
            }

            function mouseUpHandler() {
                document.removeEventListener('mousemove', mouseMoveHandler);
                document.removeEventListener('mouseup', mouseUpHandler);
            }

            document.addEventListener('mousemove', mouseMoveHandler);
            document.addEventListener('mouseup', mouseUpHandler);
        });
    });
</script>
</html>
